<template>
  <view class="apply-container">
    <uni-forms
      ref="valiForm"
      :rules="rulesRef"
      :model="formData"
      labelWidth="360"
    >
      <view class="formItem">
        <uni-forms-item label="案件编号" required name="number1">
          <customSelect
            :value="formData.number1"
            :dataList="number1List"
            @changeSelect="changeSelect1"
            :fieldNames="fieldNames"
          ></customSelect>
        </uni-forms-item>
        <uni-forms-item class="custom" required name="number2">
          <customSelect
            :value="formData.number2"
            :dataList="number2List"
            @changeSelect="changeSelect2"
            :fieldNames="field2Names"
          ></customSelect>
        </uni-forms-item>
        <uni-forms-item class="custom" required name="number3">
          <customSelect
            :value="formData.number3"
            :dataList="number3List"
            @changeSelect="changeSelect3"
            :fieldNames="field3Names"
          ></customSelect>
        </uni-forms-item>
        <uni-forms-item class="custom" required name="number4">
          <view class="formSelect">
            <view class="selectText"
              ><input
                type="text"
                v-model="formData.number4"
                placeholder="请输入"
            /></view>
          </view>
        </uni-forms-item>
      </view>
      <view class="formItem">
        <uni-forms-item label="期望时间" required name="time">
          <picker
            mode="date"
            :value="formData.time"
            start="2000-01-01"
            end="2025-12-31"
            @change="bindDateChange"
          >
            <view class="datePicker">
              <view
                class="pickerText"
                :class="formData.time ? '' : 'palcClass'"
                >{{ formData.time ? formData.time : "请选择期望时间" }}</view
              >
              <image
                class="pickerIcon"
                src="@/static/images/icon-right.png"
              ></image>
            </view>
          </picker>
        </uni-forms-item>
      </view>
      <view class="formItem">
        <uni-forms-item label="地址" required name="address">
          <view class="datePicker">
            <view
              class="pickerText"
              :class="formData.address ? '' : 'palcClass'"
              >{{
                formData.address ? formData.address : "省/市/区县/街道"
              }}</view
            >
            <image
              class="addressIcon"
              src="@/static/images/icon-address.png"
              @click="openMap()"
            ></image>
          </view>
        </uni-forms-item>
      </view>
      <view class="formItem">
        <uni-forms-item label="门牌号" required name="house">
          <view class="datePicker">
            <input
              class="formInupt"
              placeholder-class="palcClass"
              type="text"
              v-model="formData.house"
              placeholder="详细地址"
            />
          </view>
        </uni-forms-item>
      </view>
      <view class="reasonBox">
        <view class="reasonTitle">巡回审判申请原因</view>
        <uni-forms-item name="house">
          <view class="textareaBox">
            <textarea
              class="textareaClass"
              placeholder="请填写申请原因"
              placeholder-class="palcClass"
              :maxlength="100"
              @input="updateCount"
            ></textarea>
            <view class="count">
              <text class="totalCount">{{ totalCount }}/</text>
              <text>100</text>
            </view>
          </view>
        </uni-forms-item>
        <view class="isOpen">
          <uni-forms-item name="open" label="是否公开">
            <text class="openText">{{ formData.open ? "是" : "否" }}</text>
            <switch
              class="switch"
              :checked="formData.open"
              @change="handeSwitch"
            />
          </uni-forms-item>
        </view>
      </view>
      <view class="agreement">
        <image class="iconAgree" src="@/static/images/icon_xuan.png"></image>
        <text class="agreeText"
          >同意
          <p>《公开协议》</p></text
        >
      </view>
    </uni-forms>
    <view class="btnApply" @click="submit()">提交巡回审判申请</view>
    <view class="h-[16rpx]"></view>
    <uni-popup
      ref="mapLocationRef"
      type="bottom"
      background-color="#fff"
      border-radius="40rpx 40rpx 0 0"
    >
      <view class="w-[100%] h-[40rpx]"></view>
      <mapLocation @changeCheck="changeCheck"></mapLocation>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import customSelect from "@/components/customSelect/index.vue";

const mapLocationRef = ref(null);
let rulesRef = {
  number1: {
    rules: [
      {
        required: true,
        errorMessage: "请选择",
      },
    ],
  },
  number2: {
    rules: [
      {
        required: true,
        errorMessage: "请选择",
      },
    ],
  },
  number3: {
    rules: [
      {
        required: true,
        errorMessage: "请选择",
      },
    ],
  },
  number4: {
    rules: [
      {
        required: true,
        errorMessage: "请输入",
      },
    ],
  },
  time: {
    rules: [
      {
        required: true,
        errorMessage: "请选择期望时间",
      },
    ],
  },
  address: {
    rules: [
      {
        required: true,
        errorMessage: "请选择地址",
      },
    ],
  },
  house: {
    rules: [
      {
        required: true,
        errorMessage: "请输入详细地址",
      },
    ],
  },
};
let formData = ref({
  number1: "9",
  number2: "",
  number3: "",
  number4: "",
  time: "",
  address: "",
  house: "",
  open: false,
});
const fieldNames = ref({
  id: "id",
  value: "value",
}); // fieldNames用于案件编号组件，自定义id和value字段名
let number1List = ref([
  { id: 0, value: 2024 },
  { id: 1, value: 2023 },
  { id: 2, value: 2022 },
  { id: 3, value: 2021 },
  { id: 4, value: 2020 },
  { id: 5, value: 2019 },
  { id: 6, value: 2018 },
  { id: 7, value: 2017 },
  { id: 8, value: 2019 },
  { id: 9, value: 2018 },
  { id: 10, value: 2017 },
]);
const changeSelect1 = (res: any) => {
  console.log(res);
  formData.value.number1 = res.id;
};

const field2Names = ref({
  id: "code",
  value: "label",
});
let number2List = ref([
  {
    code: 0,
    label: "渝107",
  },
  {
    code: 1,
    label: "渝108",
  },
  {
    code: 2,
    label: "渝109",
  },
  {
    code: 3,
    label: "渝106",
  },
  {
    code: 4,
    label: "渝104",
  },
  {
    code: 5,
    label: "渝103",
  },
]);
const changeSelect2 = (res: any) => {
  console.log(res);
  formData.value.number2 = res.code;
};

const field3Names = ref({
  id: "code",
  value: "label",
});
let number3List = ref([
  {
    code: 0,
    label: "名初",
  },
  {
    code: 1,
    label: "明初",
  },
  {
    code: 2,
    label: "清末",
  },
  {
    code: 3,
    label: "东汉末年",
  },
  {
    code: 4,
    label: "唐末",
  },
]);
const changeSelect3 = (res: any) => {
  console.log(res);
  formData.value.number3 = res.code;
};

const bindDateChange = (e: any) => {
  console.log(e);
  // formData.value.time = e.detail.value;
};

let totalCount = ref(0);
const updateCount = (e: any) => {
  totalCount.value = e.detail.cursor;
};

const handeSwitch = (e: any) => {
  formData.value.open = e.detail.value;
};

const openMap = () => {
  mapLocationRef.value.open();
};
const changeCheck = () => {
  formData.value.address = "312312";
  mapLocationRef.value.close();
};

let valiForm = ref();
const submit = () => {
  uni.redirectTo({
    url: "/subPages/result/index?mark=2",
  });
  // valiForm.value.validate((valid: any) => {
  //   if (!valid) {
  //     uni.showToast({
  //       title: `校验通过`,
  //     });
  //   }
  // });
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f6f7f8;
}
.apply-container {
  padding-top: 20rpx;
  .formItem {
    width: calc(100% - 60rpx);
    height: 110rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    background: #fff;
    :deep(.uni-forms-item) {
      width: 100%;
      align-items: center;
      margin-bottom: 0;
      .uni-forms-item__label {
        width: 157rpx;
        padding: 0;
      }
      .uni-forms-item__content {
        width: calc(100% - 157rpx);
      }
    }
    .formSelect {
      width: 126rpx;
      height: 62rpx;
      border-radius: 10rpx;
      border: 1px solid #e8e9ec;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .selectText {
        margin: 0 12rpx;
        font-size: 28rpx;
        color: #666666;
      }
      .selectIcon {
        width: 22rpx;
        height: 22rpx;
        margin: 0 12rpx;
      }
    }
    .custom {
      margin-left: 10rpx;
      :deep(.uni-forms-item__label) {
        display: none;
      }
    }
    .datePicker {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .pickerText {
        font-size: 32rpx;
        color: #333333;
      }
      .palcClass {
        font-size: 28rpx;
        color: #999999;
      }
      .pickerIcon {
        width: 22rpx;
        height: 22rpx;
        flex-shrink: 0;
      }
      .addressIcon {
        width: 40rpx;
        height: 40rpx;
        flex-shrink: 0;
      }
      .formInupt {
        width: 100%;
        height: 100%;
      }

      :deep(.uni-input-input) {
        width: 100%;
      }
    }
  }
  .palcClass {
    font-size: 28rpx;
    color: #999999;
  }
  .reasonBox {
    margin-top: 20rpx;
    width: calc(100% - 60rpx);
    padding: 30rpx;
    background-color: #fff;
    .reasonTitle {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      margin-top: 6rpx;
    }
    .textareaBox {
      width: 100%;
      height: 380rpx;
      margin-top: 30rpx;
      position: relative;
    }
    .textareaClass {
      width: 100%;
      height: 100%;
      font-size: 32rpx;
      color: #333333;
    }
    .count {
      position: absolute;
      font-size: 22rpx;
      color: #333;
      right: 30rpx;
      bottom: 30rpx;
      .totalCount {
        color: #999;
      }
    }
    .isOpen {
      border-top: 1px solid #e8e9ec;
      padding-top: 36rpx;
      :deep(.uni-forms-item__content) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .openText {
        font-size: 28rpx;
        color: #999999;
        margin-right: 20rpx;
      }
      .switch {
        width: 82rpx;
        height: 41rpx;
        :deep(.uni-switch-input) {
          width: 82rpx;
          height: 41rpx;
        }
        :deep(.uni-switch-input.uni-switch-input-checked) {
          border-color: #1e92f0;
          background-color: #1e92f0;
        }
        :deep(.uni-switch-input::before) {
          width: 77rpx;
          height: 38rpx;
        }
        :deep(.uni-switch-input:after) {
          width: 35rpx;
          height: 35rpx;
          top: 2rpx;
        }
      }
    }
  }
  .agreement {
    width: calc(100% - 60rpx);
    margin-top: 40rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    .iconAgree {
      width: 32rpx;
      height: 32rpx;
    }
    .agreeText {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #999999;
      margin-left: 20rpx;
      p {
        color: #3d528b;
      }
    }
  }
  .btnApply {
    /* position: fixed; */
    width: 690rpx;
    height: 98rpx;
    background: #1e92f0;
    border-radius: 48rpx;
    text-align: center;
    line-height: 98rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 60rpx auto;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    bottom: calc(40rpx + env(safe-area-inset-bottom) / 2);
  }
}
:deep(.uni-forms-item) {
  margin-bottom: 0;
}
:deep(.uni-forms-item__label) {
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
}
:deep(.uni-picker-container) {
  .uni-picker-custom {
    background-color: transparent;
  }
  .uni-picker-header {
    height: 110rpx;
    padding: 0 40rpx;
    background: #f7f7f9;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .uni-picker-action {
      padding: 0;
      line-height: 110rpx;
    }
    .uni-picker-action-cancel {
      font-weight: 400;
      font-size: 32rpx;
      color: #999999;
    }
    .uni-picker-action-confirm {
      font-weight: 400;
      font-size: 32rpx;
      color: #1e92f0;
    }
  }
  .uni-picker-content {
    height: 738rpx !important;
  }
  .uni-picker-item {
    height: 55px;
    text-align: center;
    line-height: 55px;
    font-size: 28rpx;
    color: #999999;
  }
  .uni-picker-view-indicator {
    height: 55px;
    font-size: 34rpx;
    color: #1e92f0;
    line-height: 55px;
  }
  .uni-picker-view-indicator:before {
    border-top: 0;
  }
  .uni-picker-view-indicator:after {
    border-bottom: 0;
  }
}
</style>
